import React, {PureComponent} from 'react';
import {StyleSheet, View, Image, Text} from 'react-native';

export default class extends PureComponent {

    render() {
        const {item} = this.props;
        let avatar = item.avatar ? <Image source={{uri: item.avatar}} style={styles.avatar}/> :
            <Image source={require('../../../images/logo.png')} style={styles.avatar}/>;
        return (
            <View style={styles.item}>
                {avatar}
                <View style={styles.detail}>
                    <View style={{flexDirection: 'row', height: 16}}>
                        <Text numberOfLines={1} style={styles.title}>{item.username}</Text>
                        <View style={styles.hatWrap}>
                            <Image source={require('./img/hat.png')} style={styles.hat}/>
                            <Text style={styles.hatText}>{item.member_type_name || '豆芽会员'}</Text>
                        </View>
                    </View>
                    <View style={{height: 12, flexDirection: 'row'}}>
                        <Text style={styles.bottomText}>{item.phone}</Text>
                        <Text style={styles.bottomText}>{item.created_at}</Text>
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    item: {
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 16,
        height: 64,
        backgroundColor: '#fff'
    },
    avatar: {
        width: 44,
        height: 44,
        marginRight: 6,
        borderRadius: 22
    },
    detail: {
        height: 44,
        paddingTop: 6,
        paddingBottom: 6,
        justifyContent: 'space-between'
    },
    title: {
        fontSize: 12,
        fontWeight: 'bold',
        color: '#000000',
        maxWidth: 200
    },
    hatWrap: {
        paddingTop: 2,
        paddingBottom: 2,
        paddingLeft: 6,
        paddingRight: 6,
        borderRadius: 12,
        borderWidth: 1,
        marginLeft: 6,
        borderColor: '#907d5a',
        alignItems: 'center',
        flexDirection: 'row'
    },
    hat: {
        width: 8,
        height: 8
    },
    hatText: {
        fontSize: 8,
        color: '#907d5a',
        paddingLeft: 4
    },
    bottomText: {
        color: '#464646',
        paddingRight: 8,
        fontSize: 9
    }
});